<template>
  <div class="container">
    <div class="mallmain">
      <div class="malltitle" @click="toH5(config)">
        <img v-if="imgUrl&&titleObj.deault_image" :src="imgUrl+titleObj.deault_image" alt/>
        <div class="titlemark">
          <div class="marktitle">{{titleObj.name}}</div>
          <div class="markmore" @click.stop="toHomePage(titleObj.name)">
            <span>查看更多</span>
            <img v-if="base_url" :src="base_url+'/mp_3.1.1/plus_more_light.png'" alt />
          </div>
        </div>
      </div>
      <div class="malllistbox">
        <div class="malllist">
          <div class="mallitem" :class="titleObj.name=='生活美容'&&'servlist'" v-for="(item,index) in dataArr" :key="index" @click="toDetail(item)">
            <div class="mallpic">
              <img v-if="imgUrl&&item.img" :src="imgUrl+item.img" alt/>
            </div>
            <div :class="titleObj.name=='生活美容'?'sevmalldesc':'malldesc'">{{item.title}}</div>
            <div class="mallinfo" :class="titleObj.name=='生活美容'&&'mallinfoSev'">
              <div class="malllf">
                <div class="mallprice">
                  <span class="mallred" :class="phoneIos&&'mallredIos'">￥<span class="mallnew">{{item.price}}</span></span>
                  <span class="mallgray">￥<span class="mallold">{{item.origin_price}}</span></span>
                </div>
                <div class="malldis">
                  <img v-if="base_url" :src="base_url+'/mp_3.1.1/plus_icon.png'" mode="widthFix" alt />
                  <span>{{item.plus_title}}</span>
                </div>
              </div>
              <div class="mallrt" v-if="titleObj.name!='生活美容'">
                <img v-if="base_url" :src="base_url+'/mp_3.1.1/plus_fire.png'" alt />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  name: "plusmarket",
  props:{
    // 标题数据
    titleObj: {
      type: Object,
      default: function(){
        return {}
      }
    },
    // 列表数据
    dataArr: {
      type: Array,
      default() {
        return [];
      }
    },
  },
  data() {
    return {
      url: common.is_online? "https://h5.ameimeika.com/life_beauty/#/" : "https://h5s.ameimeika.com/life_beauty/#/",
      base_url: common.image_resource, //oss图片
      imgUrl: common.image_response, //http图片
      config:"",
      phoneIos:false//兼容ios手机
    };
  },
  watch:{
    titleObj(newVal,oldVal){
      if(newVal.config){
        this.config = newVal.config;
      }
    }
  },
  onLoad: function(options) {
    //调用方法获取机型
    var phone = wx.getSystemInfoSync();  
    if (phone.platform == 'ios'){
      this.phoneIos = true;
    }
  },
  onShow() {},
  methods: {
    // 查看更多
    toHomePage(name){
      switch (name) {
        case '商城优选':
          wx.navigateTo({
            url:'/pages/shop_mall/main'
          })
          break;
        case '生活美容':
         wx.switchTab({ url:'/pages/life_beauty/main' });
          break;
        case '品质医美':
          wx.switchTab({ url: '/pages/beauty_mall/main' });
          break;
      }
    },
    // 图片跳h5
    toH5(item){
      if(item){
        common.to_detail(item);
      }
    },
    // 跳详情
    toDetail(item){
      switch (this.titleObj.name) {
        case '商城优选':
          wx.navigateTo({
              url: `/pages/package_mall/goods_detail/main?goods_id=${item.id}`
          })
          break;
        case '生活美容':
          let router = encodeURIComponent(`${this.url}serviceDetail?serviceId=${item.id}`);
          wx.navigateTo({
            url: `/pages/package_main/advertisement/main?url=${router}`
          });
          break;
        case '品质医美':
          wx.navigateTo({
            url: `/pages/package_projects/project_detail/main?id=${item.id}`
          })
          break;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  box-sizing: border-box;
}
// 商城优选
.mallmain {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 11px 0px rgba(210, 210, 210, 0.09);
  border-radius: 10px;
}
.malltitle {
  width: 100%;
  height: 90px;
  border-radius: 10px 10px 0 0;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0 0;
  }
  .titlemark {
    background: linear-gradient(
      139deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(216, 216, 216, 0) 100%
    );
    width: 100%;
    height: 90px;
    border-radius: 10px 10px 0 0;
    position: absolute;
    top: 0;
    left: 0;
    padding: 23px 10px;
    box-sizing: border-box;
    .marktitle {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
      margin-bottom: 6px;
    }
    .markmore {
      width:70px;
      height:18px;
      line-height: 18px;
      background:linear-gradient(270deg,rgba(250,237,219,0.21) 0%,rgba(242,215,181,0.24) 100%);
      border-radius:9px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(156, 124, 108, 1);
      width: 70px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      box-sizing: border-box;
      img {
        width: 10px;
        height: 10px;
        vertical-align: -1rpx;
        margin-left: 4px;
      }
    }
  }
}
.malllistbox {
  width: 100%;
  overflow: hidden;
  .malllist {
    width: 100%;
    white-space: nowrap; /*规定段落中的文本不进行换行*/
    overflow-x: scroll; /*水平方向，超出部分添加滚动机制*/
    float: left; /*一定要设置左侧浮动*/
    overflow-y: hidden; /*竖直方向，超出部分隐藏*/
    padding: 10px 0 4px;
    box-sizing: border-box;
    .mallitem {
      display: inline-block;
      width: 134px;
      height: 166px;
      padding: 0 10px;
      border-right: 1px solid #f2f2f2;
      box-sizing: border-box;
      position: relative;
      .mallpic {
        width: 90px;
        height: 90px;
        border-radius: 6px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        img {
          width: 100%;
          height: 100%;
          border-radius: 6px;
        }
      }
      .malldesc {
        width: 100%;
        padding: 0 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 17px;
        white-space: pre-wrap; /*规定段落中的文本进行换行*/
        display: -webkit-box !important;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        box-sizing: border-box;
        position: absolute;
        top: 94px;
        left: 0;
      }
      // 生活美容服务标题默认一行
      .sevmalldesc{
        width: 100%;
        padding: 0 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        position: absolute;
        top: 94px;
        left: 0;
      }
      .mallinfo {
        width: 100%;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        bottom: -2px;
        left: 0;
        box-sizing: border-box;
        .malllf {
          width: 60%;
          .mallprice {
            display: flex;
            align-items: flex-end;
            .mallred {
              font-size: 10px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 500;
              color: rgba(255, 56, 62, 1);
              line-height: 14px;
              .mallnew {
                font-size: 16px;
                font-weight: 500;
                line-height: 22px;
              }
            }
            .mallredIos{
              margin-top: 3px;
            }
            .mallgray {
              margin-left: 4px;
              font-size: 10px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              line-height: 18px;
              .mallold {
                font-size: 10px;
                font-weight: 400;
                line-height: 12px;
                text-decoration: line-through;
              }
            }
          }
          .malldis {
            height: 19px;
            line-height: 19px;
            position: relative;
            box-sizing: border-box;
            img {
              margin-right: 4px;
              width: 22px;
              height: auto;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
            }
            span{
              display:inline-block;
              margin-left: 26px;
              width:90%;
              font-size: 10px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              overflow:hidden;
            }
          }
        }
        .mallrt {
          width: 32px;
          height: 32px;
          margin-top: 2px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .mallinfoSev{
        bottom:0;
      }
    }
    .servlist{
      height: 156px;
    }
    .mallitem:last-child {
      border-right: 0;
    }
  }
}
</style>